<template>
    <el-row>
        <el-col>基本信息</el-col>
        <el-form :model="diNewForm">
            <el-row :gutter="20" style="margin: 4px 0;">
                <el-col :span="10">
                    <el-form-item label="一级科室" label-width="68px">
                        <el-select v-model="newFirstKe" placeholder="请选择一级科室名称" style="width: 160px;" @change="firstTwoTan">
                            <el-option
                                    v-for="item in diNewForm.firstNewKe" :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="二级科室" label-width="68px">
                        <el-select v-model="newSecondNewKe" placeholder="请选择二级科室名称" style="width: 160px;" @change="twoDepts">
                            <el-option
                                    v-for="item in diNewForm.secondNewKe" :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="addDepart" size="mini" style="width: 50px; margin-top: 6px;">添加</el-button>
                </el-col>

            </el-row>
            <el-row :gutter="20" style="margin: 4px 0;" v-for="(item, index) in twoLevelDeptIds" :key="index">
                <el-col :span="10">
                    <el-form-item label="一级科室" label-width="68px">
                        <el-select v-model="twoLevelDeptIds[index].label" placeholder="请选择一级科室名称" style="width: 160px;" @change="firstTwoTan(index)">
                            <el-option
                                    v-for="item in diNewForm.first " :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="二级科室" label-width="68px">
                        <el-select v-model="twoLevelDeptIds[index].value" placeholder="请选择二级科室名称" style="width: 160px;" @change="twoDept(index)">
                            <el-option
                                    v-for="item in diNewForm.second" :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="deDepart(item,index)" size="mini" style="width: 50px; margin-top: 6px;">删除</el-button>
                </el-col>

            </el-row>
        </el-form>
    </el-row>
</template>
<script>
export default {
  data() {
    return {
      newFirstKe: '',
      newSecondNewKe: '',
      diNewForm: {
        firstNewKe: [{
          value: 1,
          label: '北京'
        }, {
          value: 2,
          label: '南京'
        }, {
          value: 3,
          label: '上海'
        }],
        secondNewKe: [{
          value: 1,
          label: '石家庄'
        }, {
          value: 2,
          label: '邢台'
        }, {
          value: 3,
          label: '唐山'
        }],
        first: [],
        second: []
      },
      twoLevelDeptIds: [],
      twoDeptIds: [], // 获取第二科室id集合
      list: [],
      first: '',
      second: ''
    }
  },
  methods: {
    twoDepts() {
      this.twoDeptIds.push(this.newSecondNewKe)
      console.log(this.twoDeptIds)
    },
    // 第二科室onchange
    twoDept(index, e) {
      console.log(e)
      this.twoDeptIds.push(this.twoLevelDeptIds[index].value)
      console.log(this.twoDeptIds)
      console.log(this.newSecondNewKe)
    },
    // 第一科室onchange
    firstTwoTan(e) {
      console.log(e)
      this.diNewForm.second = [{
        value: 1,
        label: '保定1'
      }, {
        value: 2,
        label: '邢台1'
      }, {
        value: 3,
        label: '唐山1'
      }]
    },
    // 添加
    addDepart() {
      let domainLength = this.twoLevelDeptIds.length;
      console.log(domainLength)
      if (domainLength == 4) {
        return this.$message.error('最多只能添加五项');
      }
      this.twoLevelDeptIds.push({
        value: '',
        label: ''
      });
      this.diNewForm.first = [{
        value: 1,
        label: '北京1'
      }, {
        value: 2,
        label: '南京1'
      }, {
        value: 3,
        label: '上海1'
      }]
    },
    // 删除
    deDepart(item, index) {
      console.log(item)
      console.log(index)
      this.twoLevelDeptIds.splice(index, 1);
      console.log(this.twoDeptIds);
    }
  }
}
</script>
